<template>
    <div>
        <div>
            <div class="mb-8">
                <span class="col-8A93A7 fz-14 mr-16">余额预警</span>
                <a-switch v-model:checked="checked"  @change="switchChange" />
            </div>
            <div v-if="checked" class="fz-12" style="color:#223354;">余额不足<span class="col-money">¥{{ form.threshold }}</span>发送预警</div>
        </div>

        <a-modal v-model:visible="modalVisible" title="余额预警" @ok="handleOk(1)" @cancel="handleCancel">
            <a-form layout="inline" :model="form">
                <a-form-item label="" style="margin-bottom: 8px;">
                    <span>余额低于</span>
                    <a-input-number  style="width:120px;" placeholder="请输入金额" v-model:value="form.threshold" :min="1" :max="999999" />元,
                </a-form-item>
                <div>或当前余额不足，将在GPUMall微信公众号推送预警消息以及发送短信通知</div>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { XsyMessage } from '@/libs/util.toast'
import { balanceWarningApi } from 'api/modules/api.account'
import userInfoStore from '@/stores/userInfo.js'

const checked = ref(false)
const form = ref({})
const userInfo = userInfoStore().userInfo || {} // 获取个人余额预警信息
checked.value = userInfo?.settings?.balance_warning_enable == 1 ? true : false
form.value.threshold =  userInfo?.settings?.balance_warning_threshold

const modalVisible = ref(false)

// 确定按钮的回调
const handleOk = (type) => {
    const params = {
        enable: type,
        threshold: form.value.threshold
    }

    balanceWarningApi(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('操作成功');
            modalVisible.value = false
        }   
    })
};

const handleCancel = ()=> {
    checked.value = false
}

const switchChange  = (checked)=> {
    if(checked) {
        modalVisible.value = true
    }else {
        modalVisible.value = false
        handleOk(0)
    }
}

</script>

<style scoped lang="less"></style>

